<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
            width: 300px;
            margin: 0 auto;
        }
        th,td{
            font-size: 20px;
            text-align: center;
            border: 1px solid #000;
        }
        caption{
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="root">
        <h1>请登录再做操作</h1>
        <h2 id="info"></h2>
        <hr>
        <form>
            <div>
                <input id="username" type="text">
            </div>
            <div>
                <input id="password" type="password">
            </div>
            <div>
                <button id="login-btn" type="button">登录</button>
            </div>
        </form>
    </div>

    <script>

        /* 
            问题：
                -现在是登陆以后直接将用户信息存储到了localStorage中
                -主要存在两个问题
                    1.数据安全问题
                    2.服务器不知道客户端有没有登录
                -解决问题
                    如何告诉服务器客户端登录状态
                        -rest风格的服务器是无状态的服务器，所以注意不要在服务器中储存用户的数据
                        -服务器中不能存储用户信息，可以将用户信息发送给客户端保存
                            客户端每次访问服务器时，直接将用户信息返回，服务器就可以根据用户信息来识别用户的身份
                        -但是如果将数据直接发给客户端也会有安全问题
                            所以我们要将数据进行加密，加密后再发给客户端保存，这样就可以避免数据泄露的问题

                            -在node中我们可以直接使用jsonwebtoken这个包来对数据进行加密
                                jsonwebtoken（jwt） --》 通过json加密后，生成web中使用的令牌
                                    1.安装 yarn add jsonwebtoken
                                    2.引用
        */

        const loginBtn = document.getElementById("login-btn")
        const root = document.getElementById("root")

        function loadData() {
            // 当我们访问的是需要权限的api时，必须再请求中附加权限信息
            // token一般都是通过请求头来发送
            const token = localStorage.getItem("token")
            fetch("http://localhost:3000/students",{
                headers:{
                    // "Bearer XXX"
                    "authorization":`Bearer ${token}`
                }
            })
                .then((res) => {
                    if (res.status === 200) {
                        return res.json()
                    } else {
                        throw new Error("请求加载失败")
                    }

                })
                .then((res) => {
                    // 拿到数据后，将数据渲染到页面中
                    if (res.status === "ok") {
                        const dataDiv = document.getElementById("data")

                        // 创建一个table
                        const table = document.createElement("table")
                        dataDiv.appendChild(table)
                        table.insertAdjacentHTML("beforeend", "<caption>学生列表</caption>")
                        table.insertAdjacentHTML("beforeend", `
                            <thead>
                                <tr>
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>年龄</th>
                                    <th>性别</th>
                                    <th>地址</th>
                                </tr>    
                            </thead>
                        `)

                        const tbody = document.createElement("tbody")
                        table.appendChild(tbody)
                        // 遍历数据
                        for (let stu of res.data) {

                            tbody.insertAdjacentHTML("beforeend", `
                                <tr>
                                    <td>${stu.id}</td> 
                                    <td>${stu.name}</td>
                                    <td>${stu.age}</td>
                                    <td>${stu.gender}</td>
                                    <td>${stu.address}</td>  
                                </tr>
                            `)
                        }
                    }
                })
                .catch((err) => {
                    console.log("出错了", err);
                })
        }


        if (localStorage.getItem("token")) {
            root.innerHTML = `
                <h1>欢迎${localStorage.getItem("nickname")}回来！</h1>
                <hr>
                <button id="load-btn" onclick = "loadData()">加载数据</button>
                <button onclick = "localStorage.clear()">注销</button>
                <hr>
                <div id = "data"></div>
            `
        } else {
            loginBtn.onclick = () => {
                const username = document.getElementById("username").value.trim()
                const password = document.getElementById("password").value.trim()

                fetch("http://localhost:3000/login", {
                    method: "POST",
                    headers: {
                        "Content-type": "application/json"
                    },
                    body: JSON.stringify({ username, password })
                })
                    .then((res) => {
                        return res.json()
                    })
                    .then((res) => {
                        if (res.status !== "ok") {
                            throw new Error("用户名或密码错误")
                        }
                        localStorage.setItem("token", res.data.token)
                        localStorage.setItem("nickname", res.data.nickname)

                        root.innerHTML = `
                        <h1>欢迎${res.data.nickname}回来！</h1>
                        <hr>
                        <button id = "load-btn" onclick = "loadData()">加载数据</button>
                        <button onclick = "localStorage.clear()">注销</button>
                        <hr>
                        <div id = "data"></div>
                    `
                    })
                    .catch((err) => {

                        document.getElementById("info").innerText = "用户名或密码错误"
                    })
            }

        }
    </script>
</body>

</html>